<template>
  <view class="xl-nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
    <view class="nav-content" :style="{ height: navBarHeight + 'px' }">
      <view class="nav-left" @click="handleBack" v-if="showBack">
        <text class="back-icon">←</text>
        <text class="back-text">返回</text>
      </view>
      <view class="nav-title">{{ title }}</view>
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  showBack: {
    type: Boolean,
    default: true
  }
});

const statusBarHeight = ref(0);
const navBarHeight = 44;

// 获取状态栏高度
const getStatusBarHeight = () => {
  // #ifdef APP-PLUS
  statusBarHeight.value = plus.navigator.getStatusbarHeight();
  // #endif
  
  // #ifdef H5
  statusBarHeight.value = 0;
  // #endif
};

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  getStatusBarHeight();
});
</script>

<style lang="scss">
.xl-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    
    .nav-left {
      display: flex;
      align-items: center;
      padding: 10rpx 20rpx;
      
      .back-icon {
        font-size: 36rpx;
        margin-right: 10rpx;
        color: #666666;
      }
      
      .back-text {
        font-size: 28rpx;
        color: #666666;
      }
    }
    
    .nav-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      flex: 1;
      text-align: center;
      margin: 0 60rpx;
    }
    
    .nav-right {
      min-width: 100rpx;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style> 